<template>
  <page-container title="设置参数" class="container">
    <el-form
      ref="formRef"
      style="max-width: 600px"
      :model="numberValidateForm"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item
        label="亮度"
        prop="brightness"
        :rules="[
          { required: true, message: '不可为空' },
          // { type: 'number', message: '必须是浮点数！' }
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.brightness"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="对比度"
        prop="contrast"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.contrast"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="饱和度"
        prop="saturation"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.saturation"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="色相"
        prop="hue"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.hue"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="锐度"
        prop="sharpness"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.sharpness"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="Gamma"
        prop="gamma"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.gamma"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="白平衡"
        prop="whiteBalance"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.whiteBalance"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="背光对比度"
        prop="backlightContrast"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.backlightContrast"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="曝光度"
        prop="exposure"
        :rules="[
          { required: true, message: '不可为空' },
          { validator: validateFloat }
        ]"
      >
        <el-input
          v-model.number="numberValidateForm.exposure"
          type="number"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="设备序列号" prop="equipment_no">
        <el-input
          v-model="numberValidateForm.equipment_no"
          autocomplete="off"
          disabled
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>

<!--&lt;!&ndash;<script setup lang="ts">&ndash;&gt;-->

<!--&lt;!&ndash;import { reactive, ref ,onUpdated ,onMounted} from 'vue'&ndash;&gt;-->
<!--&lt;!&ndash;import type { FormInstance } from 'element-plus'&ndash;&gt;-->
<!--&lt;!&ndash;import  { ElMessage } from 'element-plus'&ndash;&gt;-->
<!--&lt;!&ndash;import { remoteGetParameters ,remoteSetParameters} from '@/api/clothrequest';&ndash;&gt;-->
<!--&lt;!&ndash;import { useRoute } from 'vue-router';&ndash;&gt;-->

<!--&lt;!&ndash;const route = useRoute();&ndash;&gt;-->

<!--&lt;!&ndash;onMounted(() => {&ndash;&gt;-->
<!--&lt;!&ndash;  try {&ndash;&gt;-->
<!--&lt;!&ndash;    // 你的代码&ndash;&gt;-->
<!--&lt;!&ndash;    console.log("onMounted")&ndash;&gt;-->
<!--&lt;!&ndash;    console.log('route.query.deviceCode',route.query.equipment_no)&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.equipment_no = route.query.equipment_no&ndash;&gt;-->
<!--&lt;!&ndash;    getDataList(route.query.equipment_no)&ndash;&gt;-->
<!--&lt;!&ndash;  } catch (error) {&ndash;&gt;-->
<!--&lt;!&ndash;    console.error('Error in mounted hook:', error);&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;      &ndash;&gt;-->
<!--&lt;!&ndash;    })&ndash;&gt;-->

<!--&lt;!&ndash;const formRef = ref<FormInstance>()&ndash;&gt;-->

<!--&lt;!&ndash;const numberValidateForm = reactive({&ndash;&gt;-->
<!--&lt;!&ndash;  brightness: '',&ndash;&gt;-->
<!--&lt;!&ndash;  contrast: '',&ndash;&gt;-->
<!--&lt;!&ndash;  saturation: '',&ndash;&gt;-->
<!--&lt;!&ndash;  hue: '',&ndash;&gt;-->
<!--&lt;!&ndash;  sharpness: '',&ndash;&gt;-->
<!--&lt;!&ndash;  gamma: '',&ndash;&gt;-->
<!--&lt;!&ndash;  whiteBalance: '',&ndash;&gt;-->
<!--&lt;!&ndash;  backlightContrast: '',&ndash;&gt;-->
<!--&lt;!&ndash;  exposure: '',&ndash;&gt;-->
<!--&lt;!&ndash;  id:'',&ndash;&gt;-->
<!--&lt;!&ndash;  setTime:'',&ndash;&gt;-->
<!--&lt;!&ndash;  used:0,&ndash;&gt;-->
<!--&lt;!&ndash;  equipment_no:''&ndash;&gt;-->
<!--&lt;!&ndash;})&ndash;&gt;-->

<!--&lt;!&ndash;const getDataList = (equipment_no) => {&ndash;&gt;-->
<!--&lt;!&ndash;  const res = remoteGetParameters(equipment_no)&ndash;&gt;-->
<!--&lt;!&ndash;  if(res.data.code === 1){&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.brightness = res.data.data.brightness&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.contrast = res.data.data.contrast&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.saturation = res.data.data.saturation&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.hue = res.data.data.hue&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.sharpness = res.data.data.sharpness&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.gamma = res.data.data.gamma&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.whiteBalance = res.data.data.whiteBalance&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.backlightContrast = res.data.data.backlightContrast&ndash;&gt;-->
<!--&lt;!&ndash;    numberValidateForm.exposure = res.data.data.exposure&ndash;&gt;-->
<!--&lt;!&ndash;  }else{&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage({&ndash;&gt;-->
<!--&lt;!&ndash;          message: res.data.data,&ndash;&gt;-->
<!--&lt;!&ndash;          type: 'warning',&ndash;&gt;-->
<!--&lt;!&ndash;          })&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;const submitForm = (formEl: FormInstance | undefined) => {&ndash;&gt;-->
<!--&lt;!&ndash;  if (!formEl) return&ndash;&gt;-->
<!--&lt;!&ndash;  formEl.validate((valid) => {&ndash;&gt;-->
<!--&lt;!&ndash;    if (valid) {&ndash;&gt;-->
<!--&lt;!&ndash;      console.log('submit!')&ndash;&gt;-->
<!--&lt;!&ndash;      console.log(numberValidateForm)&ndash;&gt;-->
<!--&lt;!&ndash;      const res = remoteSetParameters(numberValidateForm)&ndash;&gt;-->
<!--&lt;!&ndash;      if(res.data.code === 1){&ndash;&gt;-->
<!--&lt;!&ndash;        ElMessage({&ndash;&gt;-->
<!--&lt;!&ndash;          message: '设置成功',&ndash;&gt;-->
<!--&lt;!&ndash;          type: 'success',&ndash;&gt;-->
<!--&lt;!&ndash;          })&ndash;&gt;-->
<!--&lt;!&ndash;      }else{&ndash;&gt;-->
<!--&lt;!&ndash;        ElMessage({&ndash;&gt;-->
<!--&lt;!&ndash;          message: '设置失败',&ndash;&gt;-->
<!--&lt;!&ndash;          type: 'warning',&ndash;&gt;-->
<!--&lt;!&ndash;          })&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    } else {&ndash;&gt;-->
<!--&lt;!&ndash;      console.log('error submit!')&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  })&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;const resetForm = (formEl: FormInstance | undefined) => {&ndash;&gt;-->
<!--&lt;!&ndash;  if (!formEl) return&ndash;&gt;-->
<!--&lt;!&ndash;  formEl.resetFields()&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;  </script>&ndash;&gt;-->

<!--<script setup>-->
<!--import { reactive, ref, onMounted } from 'vue'-->
<!--import { ElMessage } from 'element-plus'-->
<!--import { remoteGetParameters, remoteSetParameters } from '@/api/clothrequest'-->
<!--import { useRoute } from 'vue-router'-->

<!--const route = useRoute()-->
<!--const formRef = ref(null)-->
<!--const numberValidateForm = reactive({-->
<!--  brightness: null,-->
<!--  contrast: null,-->
<!--  saturation: null,-->
<!--  hue: null,-->
<!--  sharpness: null,-->
<!--  gamma: null,-->
<!--  whiteBalance: null,-->
<!--  backlightContrast: null,-->
<!--  exposure: null,-->
<!--  id: '',-->
<!--  setTime: '',-->
<!--  used: 0,-->
<!--  equipment_no: ''-->
<!--})-->

<!--onMounted(() => {-->
<!--  try {-->
<!--    // 添加类型转换-->
<!--    const equipmentNo = route.query.equipment_no?.toString() || ''-->
<!--    numberValidateForm.equipment_no = equipmentNo-->
<!--    getDataList(equipmentNo)-->
<!--  } catch (error) {-->
<!--    console.error('Mounted error:', error)-->
<!--  }-->
<!--})-->

<!--// 异步函数改造-->
<!--const getDataList = async (equipment_no) => {-->
<!--  try {-->
<!--    const res = await remoteGetParameters(equipment_no)-->
<!--    if (res.data?.code === 1) {-->
<!--      Object.assign(numberValidateForm, res.data.data)-->
<!--    } else {-->
<!--      ElMessage.warning(res.data?.message || '获取数据失败')-->
<!--    }-->
<!--  } catch (error) {-->
<!--    ElMessage.error('请求异常: ' + error.message)-->
<!--  }-->
<!--}-->

<!--const submitForm = async (formEl) => {-->
<!--  if (!formEl) return-->
<!--  try {-->
<!--    await formEl.validate()-->
<!--    const res = await remoteSetParameters(numberValidateForm)-->
<!--    if (res.data?.code === 1) {-->
<!--      ElMessage.success('设置成功')-->
<!--    } else {-->
<!--      ElMessage.warning(res.data?.message || '设置失败')-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('Validation error:', error)-->
<!--  }-->
<!--}-->

<!--const resetForm = (formEl) => {-->
<!--  if (!formEl) return-->
<!--  formEl.resetFields()-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.container {-->
<!--  border-radius: 20px;-->
<!--  font-weight: bold;-->
<!--  font-size: 17px;-->
<!--}-->
<!--.add-button {-->
<!--  background-color: #077aee;-->
<!--  font-weight: bold;-->
<!--  color: #fff;-->
<!--}-->
<!--.select-button {-->
<!--  background-color: #077aee;-->
<!--  color: #fff;-->
<!--}-->
<!--</style>-->



<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { remoteGetParameters, remoteSetParameters } from '@/api/clothrequest'
import { useRoute } from 'vue-router'

const route = useRoute()
const formRef = ref(null)

const numberValidateForm = reactive({
  brightness: null,
  contrast: null,
  saturation: null,
  hue: null,
  sharpness: null,
  gamma: null,
  whiteBalance: null,
  backlightContrast: null,
  exposure: null,
  id: '',
  setTime: '',
  used: 0,
  equipment_no: ''
})

// 增强路由参数处理
const getSafeEquipmentNo = () => {
  const queryParam = route.query.equipment_no
  if (Array.isArray(queryParam)) {
    return queryParam[0] || ''
  }
  return queryParam || ''
}

onMounted(() => {
  try {
    const equipmentNo = getSafeEquipmentNo()
    if (!equipmentNo) {
      ElMessage.error('无效设备编号')
      return
    }
    numberValidateForm.equipment_no = equipmentNo
    getDataList(equipmentNo)
  } catch (error) {
    console.error('Mounted error:', error)
  }
})

// 数值安全转换
const safeNumberConvert = (value) => {
  const num = Number(value)
  return isNaN(num) ? null : num
}

const getDataList = async (equipment_no) => {
  try {
    const res = await remoteGetParameters(equipment_no)
    console.log("res",res)
    if (res.data?.code === 1) {
      const data = res.data.data
      numberValidateForm.brightness = safeNumberConvert(data.brightness)
      numberValidateForm.contrast = safeNumberConvert(data.contrast)
      numberValidateForm.saturation = safeNumberConvert(data.saturation)
      numberValidateForm.hue = safeNumberConvert(data.hue)
      numberValidateForm.sharpness = safeNumberConvert(data.sharpness)
      numberValidateForm.gamma = safeNumberConvert(data.gamma)
      numberValidateForm.whiteBalance = safeNumberConvert(data.whiteBalance)
      numberValidateForm.backlightContrast = safeNumberConvert(data.backlightContrast)
      numberValidateForm.exposure = safeNumberConvert(data.exposure)


      // 其他字段同理...
    }
  } catch (error) {
    ElMessage.error('请求失败: ' + error.message)
  }
}


// 自定义验证函数
// const validateFloat = (rule, value, callback) => {
//   if (value === null || value === '') {
//     callback(new Error('不可为空'))
//   } else if (isNaN(value)) {
//     callback(new Error('必须是浮点数'))
//   } else {
//     callback()
//   }
// }
const validateFloat = (rule, value, callback) => {
  if (value === null || value === '') {
    callback(new Error('不可为空'));
  } else if (isNaN(value)) {
    callback(new Error('必须是数字'));
  } else if (typeof value !== 'number') { // 确保类型为 number
    callback(new Error('必须是有效数字'));
  } else if (!/^-?\d+(\.\d+)?$/.test(String(value))) { // 排除科学计数法
    callback(new Error('必须是标准浮点数'));
  } else {
    callback();
  }
};

const submitForm = async (formEl) => {
  if (!formEl) return
  try {
    await formEl.validate()
    const res = await remoteSetParameters(numberValidateForm)
    const msg = res.data?.message || (res.data?.code === 1 ? '成功' : '失败')
    ElMessage[res.data?.code === 1 ? 'success' : 'warning'](msg)
  } catch (error) {
    ElMessage.warning('表单验证未通过')
  }
}

// 增强重置功能
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  Object.assign(numberValidateForm, {
    brightness: null,
    contrast: null,
    saturation: null,
    hue: null,
    sharpness: null,
    gamma: null,
    whiteBalance: null,
    backlightContrast: null,
    exposure: null,
    id: '',
    setTime: '',
    used: 0,
    equipment_no: ''
  })
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px;
}
</style>
